/* screen - aboutme */

.aboutme {
  align-items: center;
  background-color: var(--cod-gray);
  display: flex;
  flex-direction: column;
  height: 9118px;
  width: 1920px;
}

.aboutme .frame-1171278831 {
  background-color: var(--cod-gray);
  height: 1080px;
  opacity: 0.3;
  position: relative;
  transform: translate(0, 25px);
  width: 1920px;
  z-index: 1;
}

.aboutme .frame-1171278831.animate-enter23 {
  animation: animate-enter23-frames 1.80s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter23-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.aboutme .overlap-group1-2 {
  height: 514px;
  left: 331px;
  position: absolute;
  top: 264px;
  width: 1359px;
}

.aboutme .overlap-group-3 {
  height: 514px;
  left: 0;
  position: absolute;
  top: 0;
  width: 1359px;
}

.aboutme .text-69 {
  color: var(--white);
  font-family: var(--font-family-pretendard-semibold);
  font-size: 55px;
  font-weight: 600;
  left: 0;
  letter-spacing: -2.20px;
  line-height: 94.1px;
  position: absolute;
  top: 0;
  width: 1359px;
}

.aboutme .frame-1171278825 {
  align-items: flex-end;
  background-color: #324553a3;
  border-radius: 200.13px;
  display: flex;
  height: 136px;
  left: 0;
  overflow: hidden;
  padding: 0 3.0px;
  position: absolute;
  top: 378px;
  width: 136px;
}

.aboutme .x1 {
  height: 136px;
  margin-bottom: 0;
  margin-left: 4px;
  width: 127px;
}

.aboutme .text-70 {
  color: var(--white);
  font-family: var(--font-family-pretendard-extrabold);
  font-size: 45.9px;
  font-weight: 800;
  left: 179px;
  letter-spacing: -1.84px;
  line-height: normal;
  position: absolute;
  top: 398px;
  width: 216px;
}

.aboutme .uiux {
  color: var(--cyan--aqua);
  font-family: var(--font-family-pretendard-regular);
  font-size: 24.5px;
  font-weight: 400;
  left: 179px;
  letter-spacing: -0.49px;
  line-height: normal;
  position: absolute;
  top: 467px;
  white-space: nowrap;
}

.aboutme .frame-1171278709-2 {
  align-items: center;
  border: 1px solid;
  border-color: var(--heavy-metal);
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  height: 65px;
  justify-content: center;
  left: 335px;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 825px;
  transition: all 0.2s ease;
  width: 151px;
}

.aboutme .frame-1171278709-2:hover {
  background-color: #00DAFF
}

.aboutme .ui {
  line-height: normal;
  position: relative;
  width: fit-content;
}

.aboutme .frame-1171278710 {
  align-items: center;
  border: 1px solid;
  border-color: var(--heavy-metal);
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  height: 65px;
  justify-content: center;
  left: 514px;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 825px;
  transition: all 0.2s ease;
  width: 151px;
}

.aboutme .frame-1171278710:hover {
  background-color: #00DAFF
}

.aboutme .ux {
  letter-spacing: -0.80px;
  line-height: normal;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.aboutme .frame-1171278711-1 {
  align-items: center;
  border: 1px solid;
  border-color: var(--heavy-metal);
  border-radius: 20px;
  display: flex;
  gap: 10px;
  height: 65px;
  justify-content: center;
  left: 693px;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 825px;
  width: 151px;
}

.aboutme .text-71 {
  letter-spacing: -0.80px;
  line-height: normal;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.aboutme .frame-19 {
  -webkit-backdrop-filter: blur(60px) brightness(100%);
  align-items: flex-start;
  backdrop-filter: blur(60px) brightness(100%);
  background-color: var(--black-2);
  border-radius: 23px;
  display: flex;
  gap: 915px;
  height: 70px;
  left: 40px;
  min-width: 1840px;
  padding: 11px 36px;
  position: fixed;
  top: 17px;
  z-index: 4;
}

.aboutme .group-1171278889:hover {
  filter: blur(5px);
}

.aboutme .group-1 {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  gap: 6px;
  min-width: 100px;
  transition: all 0.5s ease;
}

.aboutme .group-1:hover {
  transform: scale(1.1);
}

.aboutme .frame-1171278180 {
  background-color: var(--granite-gray-2);
  border-radius: 42px;
  cursor: pointer;
  height: 46px;
  overflow: hidden;
  position: relative;
  transition: all 0.2s ease;
  width: 107px;
}

.aboutme .frame-1171278180:hover {
  background-color: #585858
}

.aboutme .frame-11712781:hover {
  background-color: #383838
}

.aboutme .about-me {
  left: 18px;
  letter-spacing: -0.50px;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 13px;
  white-space: nowrap;
}

.aboutme .frame-1171278182:hover {
  background-color: #c5c5c5
}

.aboutme .place {
  left: 24px;
  letter-spacing: -0.50px;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 13px;
  white-space: nowrap;
}

.aboutme .frame-1171278732 {
  align-items: flex-start;
  background-color: var(--black);
  border: 1px solid;
  border-color: var(--dove-gray);
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  gap: 1px;
  height: 70px;
  left: 1811px;
  overflow: hidden;
  padding: 24.5px 14.5px;
  position: fixed;
  top: 970px;
  transform: rotate(-90.00deg);
  transition: all 0.2s ease;
  width: 70px;
  z-index: 5;
}

.aboutme .frame-1171278732:hover {
  background-color: #141414
}

.aboutme .flex-row {
  align-items: flex-end;
  height: 450px;
  margin-top: 135px;
  min-width: 1530px;
  z-index: 3;
}

.aboutme .frame-container {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-height: 450px;
  width: 755px;
}

.aboutme .frame-1171278700-1 {
  background-color: var(--shark-3);
  border-radius: 55px;
  cursor: pointer;
  height: 49px;
  opacity: 0.3;
  overflow: hidden;
  position: relative;
  transform: translate(0, 25px);
  transition: all 0.4s ease;
  width: 108px;
}

.aboutme .frame-1171278700-1.animate-enter41 {
  animation: animate-enter41-frames 1.40s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter41-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.aboutme .frame-1171278700-1:hover {
  transform: scale(1.1);
}

.aboutme .frame-1171278701 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  height: 373px;
  overflow: hidden;
  position: relative;
  transition: all 0.4s ease;
  width: 755px;
}

.aboutme .frame-1171278701:hover {
  transform: translate(0, -12px);
}

.aboutme .overlap-group15 {
  height: 531px;
  left: 52px;
  position: absolute;
  top: -277px;
  width: 669px;
}

.aboutme .text-116 {
  color: var(--white);
  font-family: var(--font-family-pretendard-bold);
  font-size: 39px;
  font-weight: 700;
  left: 0;
  letter-spacing: -1.56px;
  line-height: normal;
  position: absolute;
  top: 323px;
}

.aboutme .text-117 {
  left: 0;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 403px;
  width: 669px;
}

.aboutme .ellipse-8183-2 {
  background-color: var(--alto);
  border-radius: 216px;
  filter: blur(284.5px);;
  height: 432px;
  left: 109px;
  opacity: 0.05;
  position: absolute;
  top: 0;
  width: 432px;
}

.aboutme .frame-1171278700-2:hover {
  background-color: #00DAFF
}

.aboutme .text {
  letter-spacing: -0.64px;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.aboutme .frame-1171278701-1 {
  align-items: center;
  background-color: var(--log-cabin);
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  left: 150px;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 296px;
  transition: all 0.2s ease;
}

.aboutme .frame-1171278701-1:hover {
  background-color: #00DAFF
}

.aboutme .frame-1171278702 {
  align-items: center;
  background-color: var(--log-cabin);
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  left: 219px;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 296px;
  transition: all 0.2s ease;
}

.aboutme .frame-1171278702:hover {
  background-color: #00DAFF
}

.aboutme .flex-col {
  align-items: flex-start;
  flex-direction: column;
  min-height: 373px;
  width: 755px;
}

.aboutme .frame-container-1 {
  gap: 20px;
  min-width: 753px;
}

.aboutme .frame-1171278702-1:hover {
  transform: translate(0, -8px);
}

.aboutme .overlap-group20 {
  height: 455px;
  margin-left: -32px;
  margin-top: -277px;
  position: relative;
  width: 432px;
}

.aboutme .text-130 {
  left: 159px;
  letter-spacing: -2.24px;
  line-height: normal;
  position: absolute;
  top: 355px;
  white-space: nowrap;
}

.aboutme .number {
  left: 198px;
  letter-spacing: -3.40px;
  line-height: normal;
  position: absolute;
  top: 325px;
  white-space: nowrap;
}

.aboutme .text-131 {
  left: 154px;
  letter-spacing: -0.80px;
  line-height: 36px;
  position: absolute;
  top: 419px;
  white-space: nowrap;
}

.aboutme .ellipse-8183 {
  background-color: var(--alto);
  border-radius: 216px;
  filter: blur(284.5px);;
  height: 432px;
  left: 0;
  opacity: 0.05;
  position: absolute;
  top: 0;
  width: 432px;
}

.aboutme .frame-1171278703 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  align-items: flex-start;
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  display: flex;
  height: 244px;
  justify-content: center;
  overflow: hidden;
  transition: all 0.4s ease;
  width: 364px;
}

.aboutme .frame-1171278703:hover {
  transform: translate(0, -8px);
}

.aboutme .overlap-group22 {
  height: 455px;
  margin-top: -277px;
  position: relative;
  width: 432px;
}

.aboutme .text-133 {
  left: 158px;
  letter-spacing: -2.24px;
  line-height: normal;
  position: absolute;
  top: 355px;
  white-space: nowrap;
}

.aboutme .number-1 {
  left: 197px;
  letter-spacing: -3.40px;
  line-height: normal;
  position: absolute;
  top: 325px;
  white-space: nowrap;
}

.aboutme .text-134 {
  left: 155px;
  letter-spacing: -0.80px;
  line-height: 36px;
  position: absolute;
  top: 419px;
  white-space: nowrap;
}

.aboutme .frame-1171278704 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  align-items: flex-start;
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  display: flex;
  height: 109px;
  overflow: hidden;
  padding: 0 161px;
  transition: all 0.2s ease;
  width: 755px;
}

.aboutme .frame-1171278704:hover {
  background-color: #3E3E3E
}

.aboutme .overlap-group21 {
  border-radius: 216px;
  height: 432px;
  margin-top: -277px;
  position: relative;
  width: 432px;
}

.aboutme .percent {
  color: var(--cyan--aqua);
  font-family: var(--font-family-pretendard-semibold);
  font-size: 44px;
  font-weight: 600;
  left: 158px;
  letter-spacing: -1.76px;
  line-height: normal;
  position: absolute;
  top: 287px;
}

.aboutme .text-132 {
  left: 172px;
  letter-spacing: -0.80px;
  line-height: 36px;
  position: absolute;
  top: 337px;
  white-space: nowrap;
}

.aboutme .ellipse-8183-3 {
  background-color: var(--alto);
  border-radius: 216px;
  filter: blur(284.5px);;
  height: 432px;
  left: 0;
  opacity: 0.11;
  position: absolute;
  top: 0;
  width: 432px;
}

.aboutme .flex-col-1 {
  align-items: center;
  margin-left: 12.0px;
  margin-top: 20px;
  min-height: 7304px;
  width: 1722px;
  z-index: 2;
}

.aboutme .frame-container-2 {
  height: 673px;
  margin-right: 12.0px;
  min-width: 1530px;
}

.aboutme .frame-1171278705 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  align-items: flex-start;
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 669px;
  overflow: hidden;
  transition: all 0.4s ease;
  width: 490px;
}

.aboutme .frame-1171278705:hover {
  transform: translate(0, -8px);
}

.aboutme .overlap-group1 {
  align-self: center;
  height: 433px;
  margin-left: 2.0px;
  margin-top: -277px;
  position: relative;
  width: 436px;
}

.aboutme .text-12 {
  left: 19px;
  letter-spacing: -1.08px;
  line-height: normal;
  position: absolute;
  top: 319px;
  white-space: nowrap;
}

.aboutme .text-12-1 {
  left: 19px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 369px;
  width: 417px;
}

.aboutme .frame-1171278700 {
  align-items: center;
  background-color: var(--log-cabin);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  height: 39px;
  justify-content: center;
  margin-left: 47px;
  margin-top: 19px;
  overflow: hidden;
  padding: 7px 14px;
  position: relative;
  transition: all 0.2s ease;
  width: 116px;
}

.aboutme .frame-1171278700:hover {
  background-color: #00DAFF
}

.aboutme .text-12-2 {
  letter-spacing: -0.64px;
  line-height: normal;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.aboutme .frame-1171278706 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  align-items: flex-start;
  align-self: flex-end;
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 669px;
  margin-left: 34px;
  overflow: hidden;
  transition: all 0.4s ease;
  width: 490px;
}

.aboutme .frame-1171278706:hover {
  transform: translate(0, -8px);
}

.aboutme .overlap-group-container {
  align-items: flex-end;
  background-color: var(--black);
  border: 1px solid;
  border-color: #434343;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-left: -225px;
  margin-top: 80px;
  min-height: 390px;
  padding: 68.9px 61px;
  width: 659px;
}

.aboutme .overlap-group2-2 {
  height: 96px;
  margin-right: 7.14px;
  position: relative;
  width: 315px;
}

.aboutme .vector {
  height: 73px;
  left: 11px;
  position: absolute;
  top: 11px;
  width: 58px;
}

.aboutme .vector-1 {
  height: 73px;
  left: 81px;
  position: absolute;
  top: 11px;
  width: 58px;
}

.aboutme .vector-2 {
  height: 73px;
  left: 230px;
  position: absolute;
  top: 11px;
  width: 73px;
}

.aboutme .overlap-group3 {
  height: 125px;
  position: relative;
  width: 334px;
}

.aboutme .frame-1171278709-3 {
  align-items: flex-end;
  display: inline-flex;
  gap: 31px;
  left: 23px;
  position: absolute;
  top: 20px;
}

.aboutme .group-1000001659 {
  align-items: flex-start;
  display: flex;
  gap: 3px;
  height: 40px;
  left: 0;
  min-width: 41px;
  position: absolute;
  top: 0;
}

.aboutme .overlap-group-4 {
  align-self: center;
  height: 40px;
  margin-bottom: 0;
  position: relative;
  width: 13px;
}

.aboutme .overlap-group1-3 {
  align-self: flex-end;
  height: 40px;
  margin-bottom: 0;
  position: relative;
  width: 14px;
}

.aboutme .group-1000001663 {
  align-items: flex-end;
  display: flex;
  height: 39px;
  left: 2px;
  min-width: 40px;
  position: absolute;
  top: 0;
}

.aboutme .overlap-group1-4 {
  height: 39px;
  margin-bottom: 0;
  position: relative;
  width: 40px;
}

.aboutme .overlap-group-5 {
  height: 39px;
  left: 0;
  position: absolute;
  top: 0;
  width: 40px;
}

.aboutme .overlap-group1-5 {
  height: 39px;
  margin-bottom: 0;
  position: relative;
  width: 51px;
}

.aboutme .overlap-group-6 {
  height: 39px;
  left: 0;
  position: absolute;
  top: 0;
  width: 51px;
}

.aboutme .union {
  height: 39px;
  left: 17px;
  position: absolute;
  top: 0;
  width: 39px;
}

.aboutme .frame-1171278774 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  align-items: flex-start;
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 669px;
  margin-left: 26px;
  overflow: hidden;
  transition: all 0.4s ease;
  width: 490px;
}

.aboutme .frame-1171278774:hover {
  transform: translate(0, -8px);
}

.aboutme .image-1 {
  height: 375px;
  margin-top: 80px;
  object-fit: cover;
  width: 425px;
}

.aboutme .flex-row-1 {
  align-items: flex-start;
  display: flex;
  gap: 34px;
  height: 2526px;
  margin-right: 130.0px;
  margin-top: 134px;
  min-width: 1412px;
}

.aboutme .flex-col-2 {
  align-items: flex-start;
  align-self: flex-end;
  min-height: 2212px;
  width: 225px;
}

.aboutme .group-1171278890 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 80px;
  width: 135px;
}

.aboutme .number-2 {
  letter-spacing: -1.20px;
  line-height: normal;
  min-height: 36px;
  white-space: nowrap;
}

.aboutme .text-90 {
  letter-spacing: -1.20px;
  line-height: normal;
  min-height: 36px;
  white-space: nowrap;
}

.aboutme .group-117127889 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 237px;
  min-height: 80px;
  width: 80px;
}

.aboutme .number-3 {
  letter-spacing: -1.20px;
  line-height: normal;
  min-height: 36px;
  white-space: nowrap;
}

.aboutme .text-95 {
  letter-spacing: -1.20px;
  line-height: normal;
  min-height: 36px;
  white-space: nowrap;
}

.aboutme .group-1171278892 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 205px;
  min-height: 80px;
  width: 80px;
}

.aboutme .number-4 {
  letter-spacing: -1.20px;
  line-height: normal;
  min-height: 36px;
  white-space: nowrap;
}

.aboutme .text-100 {
  letter-spacing: -1.20px;
  line-height: normal;
  min-height: 36px;
  white-space: nowrap;
}

.aboutme .number-5 {
  letter-spacing: -1.20px;
  line-height: normal;
  min-height: 36px;
  white-space: nowrap;
}

.aboutme .text-106 {
  letter-spacing: -1.20px;
  line-height: normal;
  min-height: 36px;
  white-space: nowrap;
}

.aboutme .group-1171278894 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 237px;
  min-height: 80px;
  width: 135px;
}

.aboutme .number-6 {
  letter-spacing: -1.20px;
  line-height: normal;
  min-height: 36px;
  white-space: nowrap;
}

.aboutme .text-111 {
  letter-spacing: -1.20px;
  line-height: normal;
  min-height: 36px;
  white-space: nowrap;
}

.aboutme .group-1171278956 {
  align-self: flex-end;
  background-color: #131313;
  border: 0.6px solid;
  border-color: #333333;
  border-radius: 24.65px;
  cursor: pointer;
  height: 105px;
  margin-right: 2.79px;
  margin-top: 592px;
  opacity: 0.3;
  position: relative;
  transform: translate(0, 25px);
  transition: all 0.6s ease;
  width: 105px;
}

.aboutme .group-1171278956.animate-enter28 {
  animation: animate-enter28-frames 1.80s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter28-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.aboutme .group-1171278956:hover {
  transform: scale(1.1);
}

.aboutme .image-6345251 {
  height: 63px;
  left: 31px;
  object-fit: cover;
  position: absolute;
  top: 20px;
  width: 42px;
}

.aboutme .image-6345257 {
  align-self: flex-end;
  cursor: pointer;
  display: block;
  height: 108px;
  margin-top: 91px;
  opacity: 0.3;
  transform: translate(0, 25px);
  transition: all 0.6s ease;
  width: 108px;
}

.aboutme .image-6345257.animate-enter32 {
  animation: animate-enter32-frames 1.80s ease-in-out 0.00s 1 normal forwards;
  display: block;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter32-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.aboutme .image-6345257:hover {
  transform: scale(1.1);
}

.aboutme .flex-col-3 {
  align-items: center;
  gap: 124px;
  min-height: 2523px;
  width: 1153px;
}

.aboutme .flex-col-4 {
  align-items: center;
  margin-left: 2.0px;
  min-height: 2098px;
  width: 887px;
}

.aboutme .overlap-group25 {
  height: 837px;
  position: relative;
  width: 887px;
}

.aboutme .ellipse-8184 {
  background-color: var(--cyan--aqua);
  border-radius: 332px;
  cursor: pointer;
  filter: blur(361.3px);;
  height: 664px;
  left: 40px;
  opacity: 0.04;
  position: absolute;
  top: 0;
  transition: all 0.4s ease;
  width: 664px;
}

.aboutme .ellipse-8184:hover {
  transform: scale(2);
}

.aboutme .text-88 {
  left: 242px;
  letter-spacing: -0.72px;
  line-height: 25px;
  position: absolute;
  text-align: center;
  top: 164px;
}

.aboutme .text-89 {
  cursor: pointer;
  left: 250px;
  letter-spacing: -2.24px;
  line-height: normal;
  opacity: 0.3;
  position: absolute;
  text-align: center;
  top: 81px;
  transform: translate(0, 25px);
  transition: all 0.4s ease;
  white-space: nowrap;
}

.aboutme .text-89.animate-enter40 {
  animation: animate-enter40-frames 1.40s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter40-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.aboutme .text-89:hover {
  transform: scale(1.1);
}

.aboutme .frame-1171278713:hover {
  background-color: #474747
}

.aboutme .overlap-group {
  height: 432px;
  left: 35px;
  position: absolute;
  top: -277px;
  width: 796px;
}

.aboutme .ellipse-8183-1 {
  background-color: var(--alto);
  border-radius: 216px;
  filter: blur(284.5px);;
  height: 432px;
  left: 192px;
  opacity: 0.05;
  position: absolute;
  top: 0;
  width: 432px;
}

.aboutme .text-1 {
  left: 0;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 310px;
  width: 796px;
}

.aboutme .frame-1171278709 {
  align-items: center;
  background-color: var(--log-cabin);
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  left: 35px;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 166px;
  transition: all 0.2s ease;
}

.aboutme .frame-1171278709:hover {
  background-color: #00DAFF
}

.aboutme .frame-1171278710-1 {
  align-items: center;
  background-color: var(--log-cabin);
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  left: 101px;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 166px;
  transition: all 0.2s ease;
}

.aboutme .frame-1171278710-1:hover {
  background-color: #00DAFF
}

.aboutme .frame-1171278714:hover {
  background-color: #474747
}

.aboutme .overlap-group1-1 {
  height: 432px;
  margin-top: -277px;
  position: relative;
  width: 796px;
}

.aboutme .overlap-group-1 {
  height: 432px;
  left: 0;
  position: absolute;
  top: 0;
  width: 796px;
}

.aboutme .frame-1171278711-2 {
  align-items: center;
  background-color: var(--log-cabin);
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  left: 145px;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 399px;
  transition: all 0.2s ease;
}

.aboutme .frame-1171278711-2:hover {
  background-color: #00DAFF
}

.aboutme .frame-1171278709-1:hover {
  background-color: #00DAFF
}

.aboutme .frame-1171278710-2 {
  align-items: center;
  background-color: var(--log-cabin);
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  left: 79px;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 399px;
  transition: all 0.2s ease;
}

.aboutme .frame-1171278710-2:hover {
  background-color: #00DAFF
}

.aboutme .frame-117127871 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24px;
  cursor: pointer;
  height: 238px;
  margin-top: 79px;
  overflow: hidden;
  position: relative;
  transition: all 0.2s ease;
  width: 887px;
}

.aboutme .frame-117127871:hover {
  background-color: #474747
}

.aboutme .frame-1171278710-3 {
  align-items: center;
  background-color: var(--log-cabin);
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  left: 114px;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 166px;
  transition: all 0.2s ease;
}

.aboutme .frame-1171278710-3:hover {
  background-color: #00DAFF
}

.aboutme .frame-1171278711-3 {
  align-items: center;
  background-color: var(--log-cabin);
  border-radius: 10px;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  left: 298px;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 166px;
}

.aboutme .frame-1171278710-4 {
  align-items: center;
  background-color: var(--log-cabin);
  border-radius: 10px;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  left: 101px;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 166px;
}

.aboutme .frame-1171278717 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  align-items: flex-start;
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24px;
  cursor: pointer;
  display: flex;
  height: 196px;
  margin-top: 79px;
  overflow: hidden;
  padding: 0 35px;
  transition: all 0.2s ease;
  width: 887px;
}

.aboutme .frame-1171278717:hover {
  background-color: #474747
}

.aboutme .frame-1171278711-4 {
  align-items: center;
  background-color: var(--log-cabin);
  border-radius: 10px;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  left: 145px;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 399px;
}

.aboutme .frame-1171278710-5 {
  align-items: center;
  background-color: var(--log-cabin);
  border-radius: 10px;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  left: 79px;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 399px;
}

.aboutme .text-75 {
  cursor: pointer;
  letter-spacing: -2.24px;
  line-height: normal;
  margin-right: 143.0px;
  margin-top: 246px;
  min-height: 67px;
  min-width: 198px;
  opacity: 0;
  text-align: center;
  transform: scale(0.9);
  transition: all 0.4s ease;
  white-space: nowrap;
}

.aboutme .text-75.animate-enter26 {
  animation: animate-enter26-frames 0.70s ease-in-out 0.00s 1 normal forwards;
  opacity: 0;
  transform: scale(0.9);
}

@keyframes animate-enter26-frames {
  from{opacity: 0;
transform: scale(0.9);
}
to{opacity: 1;
transform: scale(1);
}
}

.aboutme .text-75:hover {
  transform: scale(1.1);
}

.aboutme .text-74 {
  letter-spacing: -0.72px;
  line-height: 25px;
  margin-right: 142.0px;
  margin-top: 14px;
  min-width: 287px;
  text-align: center;
  white-space: nowrap;
}

.aboutme .flex-row-2 {
  align-items: center;
  display: flex;
  height: 301px;
  min-width: 1153px;
}

.aboutme .flex-col-5 {
  align-items: flex-start;
  margin-bottom: 3.55px;
  min-height: 261px;
  width: 430px;
}

.aboutme .figma {
  letter-spacing: -1.20px;
  line-height: 25px;
  margin-left: 4px;
  white-space: nowrap;
}

.aboutme .overlap-group2 {
  align-items: flex-start;
  background-color: var(--shark-4);
  border-radius: 54px;
  display: flex;
  margin-top: 33px;
  min-width: 422px;
}

.aboutme .rectangle-3480386 {
  background-color: #ee7a69;
  border-radius: 54px;
  cursor: pointer;
  height: 17px;
  opacity: 0.3;
  transform: translate(0, 25px);
  transition: all 0.2s ease;
  width: 393px;
}

.aboutme .rectangle-3480386.animate-enter29 {
  animation: animate-enter29-frames 1.80s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter29-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.aboutme .rectangle-3480386:hover {
  background-color: #ffb5a9
}

.aboutme .illustrator {
  letter-spacing: -1.20px;
  line-height: 25px;
  margin-left: 12px;
  margin-top: 112px;
  white-space: nowrap;
}

.aboutme .overlap-group2-1 {
  align-items: flex-start;
  align-self: flex-end;
  background-color: var(--shark-4);
  border-radius: 54px;
  display: flex;
  margin-top: 33px;
  min-width: 422px;
}

.aboutme .rectangle-3480389 {
  background-color: #f19f39;
  border-radius: 54px;
  cursor: pointer;
  height: 17px;
  opacity: 0.3;
  transform: translate(0, 25px);
  transition: all 0.2s ease;
  width: 316px;
}

.aboutme .rectangle-3480389.animate-enter33 {
  animation: animate-enter33-frames 1.80s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter33-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.aboutme .rectangle-3480389:hover {
  background-color: #ffcb8c
}

.aboutme .flex-col-6 {
  align-items: flex-start;
  gap: 91px;
  margin-left: 151px;
  min-height: 301px;
  width: 108px;
}

.aboutme .group-1171278957 {
  background-color: var(--white);
  border-radius: 24.65px;
  cursor: pointer;
  height: 105px;
  opacity: 0.3;
  position: relative;
  transform: translate(0, 25px);
  transition: all 0.6s ease;
  width: 105px;
}

.aboutme .group-1171278957.animate-enter31 {
  animation: animate-enter31-frames 1.80s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter31-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.aboutme .group-1171278957:hover {
  transform: scale(1.1);
}

.aboutme .image-6345259 {
  height: 66px;
  left: 19px;
  object-fit: cover;
  position: absolute;
  top: 19px;
  width: 66px;
}

.aboutme .image-6345254 {
  cursor: pointer;
  display: block;
  height: 105px;
  opacity: 0.3;
  transform: translate(0, 25px);
  transition: all 0.6s ease;
  width: 108px;
}

.aboutme .image-6345254.animate-enter34 {
  animation: animate-enter34-frames 1.80s ease-in-out 0.00s 1 normal forwards;
  display: block;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter34-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.aboutme .image-6345254:hover {
  transform: scale(1.1);
}

.aboutme .flex-col-7 {
  align-items: flex-start;
  margin-bottom: 3.55px;
  margin-left: 34px;
  min-height: 261px;
  width: 430px;
}

.aboutme .visual-studio {
  letter-spacing: -1.20px;
  line-height: 25px;
  margin-left: 4px;
  white-space: nowrap;
}

.aboutme .rectangle-3480393 {
  background-color: #53a9ec;
  border-radius: 54px;
  cursor: pointer;
  height: 17px;
  opacity: 0.3;
  transform: translate(0, 25px);
  transition: all 0.2s ease;
  width: 210px;
}

.aboutme .rectangle-3480393.animate-enter30 {
  animation: animate-enter30-frames 1.80s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter30-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.aboutme .rectangle-3480393:hover {
  background-color: #b0ddff
}

.aboutme .photoshop {
  letter-spacing: -1.20px;
  line-height: 25px;
  margin-left: 12px;
  margin-top: 112px;
  white-space: nowrap;
}

.aboutme .rectangle-3480394 {
  background-color: #0c3159;
  border: 1px solid;
  border-color: #57a6f8;
  border-radius: 54px;
  box-shadow: 0px 4px 4px #00000040;
  cursor: pointer;
  height: 17px;
  opacity: 0.3;
  transform: translate(0, 25px);
  transition: all 0.2s ease;
  width: 228px;
}

.aboutme .rectangle-3480394.animate-enter35 {
  animation: animate-enter35-frames 1.80s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter35-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.aboutme .rectangle-3480394:hover {
  background-color: #3e83d1
}

.aboutme .flex-col-8 {
  align-items: center;
  margin-top: 512px;
  min-height: 3459px;
  width: 1722px;
}

.aboutme .text-76 {
  cursor: pointer;
  letter-spacing: -2.24px;
  line-height: normal;
  margin-right: 11.0px;
  min-height: 67px;
  min-width: 141px;
  opacity: 0;
  text-align: center;
  transform: scale(0.9);
  transition: all 0.4s ease;
  white-space: nowrap;
}

.aboutme .text-76.animate-enter27 {
  animation: animate-enter27-frames 0.70s ease-in-out 0.00s 1 normal forwards;
  opacity: 0;
  transform: scale(0.9);
}

@keyframes animate-enter27-frames {
  from{opacity: 0;
transform: scale(0.9);
}
to{opacity: 1;
transform: scale(1);
}
}

.aboutme .text-76:hover {
  transform: scale(1.1);
}

.aboutme .uiux-1 {
  letter-spacing: -0.72px;
  line-height: 25px;
  margin-right: 12.0px;
  margin-top: 14px;
  min-width: 290px;
  text-align: center;
  white-space: nowrap;
}

.aboutme .frame-container-3 {
  gap: 114px;
  margin-left: 46.0px;
  margin-top: 137px;
  min-width: 1446px;
}

.aboutme .frame-1171278827 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: #00000080;
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  height: 669px;
  opacity: 0.3;
  overflow: hidden;
  transform: translate(0, 25px);
  transition: all 0.6s ease;
  width: 666px;
}

.aboutme .frame-1171278827.animate-enter24 {
  animation: animate-enter24-frames 1.80s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter24-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.aboutme .frame-1171278827:hover {
  transform: scale(1.1);
}

.aboutme .overlap-group2-3 {
  height: 951px;
  left: -268px;
  position: relative;
  top: -277px;
  width: 1202px;
}

.aboutme .x1-1 {
  cursor: pointer;
  height: 678px;
  left: 0;
  opacity: 0.44;
  position: absolute;
  top: 273px;
  transition: all 0.6s ease;
  width: 1202px;
}

.aboutme .x1-1:hover {
  transform: scale(1.2);
}

.aboutme .ellipse-8183-4 {
  background-color: var(--alto);
  border-radius: 216px;
  filter: blur(284.5px);;
  height: 432px;
  left: 384px;
  opacity: 0.05;
  position: absolute;
  top: 0;
  width: 432px;
}

.aboutme .text-72 {
  color: var(--white);
  font-family: var(--font-family-pretendard-bold);
  font-size: var(--font-size-xl);
  font-weight: 700;
  left: 315px;
  letter-spacing: -1.20px;
  line-height: normal;
  position: absolute;
  top: 710px;
  white-space: nowrap;
}

.aboutme .text-73 {
  left: 315px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 765px;
  width: 552px;
}

.aboutme .ellipse-8190 {
  background-color: var(--black);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 23px;
  height: 46px;
  left: 295px;
  position: absolute;
  top: 307px;
  width: 46px;
}

.aboutme .number-7 {
  color: #676767;
  font-family: var(--font-family-pretendard-regular);
  font-size: 19px;
  font-weight: 400;
  left: 313px;
  letter-spacing: -0.76px;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 317px;
}

.aboutme .frame-1171278830 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: #00000080;
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  height: 669px;
  opacity: 0.3;
  overflow: hidden;
  transform: translate(0, 25px);
  transition: all 0.6s ease;
  width: 666px;
}

.aboutme .frame-1171278830.animate-enter25 {
  animation: animate-enter25-frames 1.80s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter25-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.aboutme .frame-1171278830:hover {
  transform: scale(1.1);
}

.aboutme .overlap-group3-1 {
  height: 946px;
  left: -509px;
  position: relative;
  top: -277px;
  width: 1190px;
}

.aboutme .x1-2 {
  cursor: pointer;
  height: 669px;
  left: 0;
  opacity: 0.44;
  position: absolute;
  top: 277px;
  transition: all 0.6s ease;
  width: 1190px;
}

.aboutme .x1-2 video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.aboutme .x1-2 img {
  object-fit: cover;
}

.aboutme .x1-2:hover {
  transform: scale(1.2);
}

.aboutme .ellipse-8183-5 {
  background-color: var(--alto);
  border-radius: 216px;
  filter: blur(284.5px);;
  height: 432px;
  left: 625px;
  opacity: 0.05;
  position: absolute;
  top: 0;
  width: 432px;
}

.aboutme .uiux-2 {
  color: var(--white);
  font-family: var(--font-family-pretendard-bold);
  font-size: var(--font-size-xl);
  font-weight: 700;
  left: 556px;
  letter-spacing: -1.20px;
  line-height: normal;
  position: absolute;
  top: 710px;
  white-space: nowrap;
}

.aboutme .it {
  left: 556px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 765px;
  width: 562px;
}

.aboutme .ellipse-8190-1 {
  background-color: var(--black);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 23px;
  height: 46px;
  left: 536px;
  position: absolute;
  top: 307px;
  width: 46px;
}

.aboutme .number-8 {
  color: #676767;
  font-family: var(--font-family-pretendard-regular);
  font-size: 19px;
  font-weight: 400;
  left: 553px;
  letter-spacing: -0.76px;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 316px;
}

.aboutme .overlap-group23 {
  height: 763px;
  margin-right: 14.0px;
  margin-top: 441px;
  position: relative;
  width: 1528px;
}

.aboutme .ellipse-8183-6 {
  background-color: var(--cyan--aqua);
  border-radius: 332px;
  cursor: pointer;
  filter: blur(361.3px);;
  height: 664px;
  left: 445px;
  opacity: 0.08;
  position: absolute;
  top: 0;
  transition: all 0.6s ease;
  width: 664px;
}

.aboutme .ellipse-8183-6:hover {
  transform: scale(2);
}

.aboutme .text-80 {
  left: 597px;
  letter-spacing: -0.72px;
  line-height: 25px;
  position: absolute;
  text-align: center;
  top: 131px;
  white-space: nowrap;
}

.aboutme .text-81 {
  cursor: pointer;
  left: 666px;
  letter-spacing: -2.24px;
  line-height: normal;
  opacity: 0.3;
  position: absolute;
  text-align: center;
  top: 50px;
  transform: translate(0, 25px);
  transition: all 0.4s ease;
  white-space: nowrap;
}

.aboutme .text-81.animate-enter36 {
  animation: animate-enter36-frames 1.40s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter36-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.aboutme .text-81:hover {
  transform: scale(1.1);
}

.aboutme .frame-1171278720 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  height: 493px;
  left: 0;
  opacity: 0.3;
  overflow: hidden;
  position: absolute;
  top: 270px;
  transform: translate(0, 25px);
  transition: all 0.6s ease;
  width: 490px;
}

.aboutme .frame-1171278720.animate-enter37 {
  animation: animate-enter37-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter37-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.aboutme .frame-1171278720:hover {
  transform: translate(0, -11px);
}

.aboutme .overlap-group-2 {
  height: 448px;
  left: 28px;
  position: absolute;
  top: -277px;
  width: 432px;
}

.aboutme .text-82 {
  left: 189px;
  letter-spacing: -1.08px;
  line-height: normal;
  position: absolute;
  top: 351px;
  width: 115px;
}

.aboutme .frame-1171278721 {
  align-items: flex-start;
  background-color: var(--white);
  border-radius: 20px;
  display: flex;
  height: 122px;
  left: 6px;
  overflow: hidden;
  position: absolute;
  top: 326px;
  width: 122px;
}

.aboutme .asdf {
  height: 122px;
  width: 122px;
}

.aboutme .text-8 {
  left: 34px;
  letter-spacing: -0.72px;
  line-height: 32px;
  position: absolute;
  top: 211px;
  width: 413px;
}

.aboutme .frame-1171278722.animate-enter38 {
  animation: animate-enter38-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter38-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.aboutme .frame-1171278722:hover {
  transform: translate(0, -11px);
}

.aboutme .alsni {
  height: 181px;
  margin-top: -17px;
  object-fit: cover;
  width: 136px;
}

.aboutme .frame-1171278721-1.animate-enter39 {
  animation: animate-enter39-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter39-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.aboutme .frame-1171278721-1:hover {
  transform: translate(0, -11px);
}

.aboutme .text-85 {
  left: 189px;
  letter-spacing: -1.08px;
  line-height: normal;
  position: absolute;
  top: 351px;
  width: 115px;
}

.aboutme .text-86 {
  left: 189px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 388px;
  width: 230px;
}

.aboutme .dfdsf {
  height: 181px;
  margin-bottom: -59px;
  object-fit: cover;
  width: 136px;
}

.aboutme .frame-1171278768 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  height: 402px;
  margin-top: 941px;
  overflow: hidden;
  position: relative;
  transition: all 0.2s ease;
  width: 1722px;
}

.aboutme .frame-1171278768:hover {
  background-color: #3E3E3E
}

.aboutme .overlap-group4 {
  height: 1024px;
  left: 348px;
  position: absolute;
  top: -882px;
  width: 1037px;
}

.aboutme .ellipse-8183-7 {
  background-color: var(--alto);
  border-radius: 512px;
  filter: blur(284.5px);;
  height: 1024px;
  left: 0;
  opacity: 0.05;
  position: absolute;
  top: 0;
  width: 1024px;
}

.aboutme .text-79 {
  left: 986px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 943px;
  white-space: nowrap;
}

.aboutme .ui-1 {
  left: 116px;
  line-height: 32px;
  position: absolute;
  top: 943px;
}

.aboutme .uiux-3 {
  left: 349px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 943px;
  white-space: nowrap;
}

.aboutme .group-1-1 {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  gap: 6px;
  height: 47px;
  left: 49px;
  min-width: 100px;
  position: absolute;
  top: 227px;
  transition: all 0.5s ease;
}

.aboutme .group-1-1:hover {
  transform: scale(1.1);
}

.aboutme .instagram {
  cursor: pointer;
  left: 1334px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  text-decoration: underline;
  top: 149px;
  width: 87px;
}

.aboutme .a24 {
  cursor: pointer;
  left: 464px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 149px;
  width: 87px;
}

.aboutme .artaloo {
  cursor: pointer;
  left: 697px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 149px;
  width: 87px;
}

.aboutme .text-77 {
  cursor: pointer;
  left: 1334px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  text-decoration: underline;
  top: 210px;
  width: 87px;
}

.aboutme .epiphone {
  cursor: pointer;
  left: 464px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 210px;
  width: 87px;
}

.aboutme .text-78 {
  left: 1334px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 271px;
  width: 87px;
}

.aboutme .flex {
  display: flex;
  gap: 20px;
}

.aboutme .flex-col-9 {
  display: flex;
  flex-direction: column;
}

.aboutme .frame-container-4 {
  align-items: flex-start;
  display: flex;
}

.aboutme .tm-2 {
  height: 14px;
  letter-spacing: -0.98px;
  line-height: normal;
  margin-top: 8px;
}

.aboutme .ui-2 {
  letter-spacing: -0.80px;
  white-space: nowrap;
}